<template>
  <div class="header ">
    <div class="">

      <el-row class="w900 wrapper">
        <!--  左侧logo-->
        <el-col :span="8">
          <router-link to="/" class="logo"><img style="width: 300px" src="../assets/img/logo1.png" alt=""></router-link>
        </el-col>
        <el-col :span="8" class="midNavi">
          <ul class="nav" style="padding-top:20px;padding-left:20px">
            <li :class="[menuActive.indexOf(item.path) === 0 ? 'is-active' : '']" v-for="item in menuListMid"
                :key="item.path" @click="selectMenu(item.path)">
              <span >{{ item.name }}</span>
            </li>
          </ul>
        </el-col>
        <!--  右侧个人中心-->
        <el-col :span="6">
          <div class="rightNavi">
            <ul class="nav" style="padding-top:20px;">
              <li :class="[menuActive.indexOf(item.path) === 0 ? 'is-active' : '']" v-for="item in menuListRight"
                  :key="item.path" @click="selectMenu(item.path)">
                <span >{{ item.name }}</span>
              </li>
            </ul>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>


</template>

<script>
export default {
  name: "Header",
  data() {
    return {
      menuListMid: [{
        name: '首页',
        path: '/index'
      }, {
        name: '语文',
        path: '/Chinese'
      }, {
        name: '英语',
        path: '/grammartest'
      }],
      menuListRight: [{
        name: '全站VIP',
        path: '/vip'
      }, {
        name: '个人中心',
        path: '/my'
      }]

    }
  },
  // 监听属性 类似于data概念
  computed: {
    // ...mapGetters(['isLogin', 'userInfo']),
    menuActive() {
      return this.$route.path
    }
  },
  methods: {
    selectMenu(item) {
      // this.isLogin || item.indexOf('/my') < 0
      {
        this.$router.push({
          path: item
        })
      }
      // else {
      //   this.loginDialog()
      // }
    },
  }


}
</script>

<style scoped>

.header {

  height: 80px;
  background: #fff;
  font-size: small;
  min-width: 1200px;
}

.wrapper {
  /*background: #fff;*/
  /*padding: 5px 0;*/
  display: flex;
  align-items: center;
  overflow-y: hidden;

}

.logo {
  height: 80px;
}

.midNavi {
  /*display:block ;*/
  height: 100%;
  margin: 0 auto;
  align-items: center;
}

.nav {
  border: 0;
  font-size: 0;
}

.nav li {
  display: inline-block;
  padding: 0;
  margin-left: 10px;
  height: 50px;
  line-height: 50px;
  color: #909399;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.nav .is-active {
  border-bottom: 2px solid #303133;
  color: #303133;

}

.nav span {
  padding: 0 20px 20px;
  display: block;
  font-size: 14px;
  text-decoration: none;
}


.rightNavi {
  width: 100%;

}

</style>
